<template>
  <div class="video-wrap" v-if="videoUrl">
    <div class="video-box">
      <video class="video" :src="videoUrl" :controls="false"></video>
      <div class="mask">
        <!-- 查看 -->
        <i class="el-icon-zoom-in icon view" @click.stop="handleView"></i>
        <!-- 删除 -->
        <i class="el-icon-delete icon" @click.stop="removeVideo"></i>
      </div>
    </div>
  </div>
  <el-upload
    class="avatar-uploader"
    ref="upload"
    action="#"
    :accept="accept"
    :multiple="multiple"
    :limit="limit"
    :auto-upload="autoUpload"
    list-type="picture-card"
    :show-file-list="true"
    :file-list="fileList"
    :before-upload="handleBeforeUpload"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible" append-to-body>
    <ArtVideoPlayer :src="videoUrl"></ArtVideoPlayer>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  import { Plus } from '@element-plus/icons-vue'
  import type { UploadProps } from 'element-plus'
  import { uploadObject } from '@utils/uploadFile'

  interface PropsType {
    modelValue: string
    //  接受上传的文件类型
    accept?: string
    //  是否支持多选
    multiple?: boolean
    //  是否自动上传文件
    autoUpload?: boolean
    //	允许上传文件的最大数量
    limit?: number
  }
  const props = withDefaults(defineProps<PropsType>(), {
    accept: 'video/*',
    multiple: false,
    autoUpload: true,
    limit: 1
  })
  const emit = defineEmits(['update:modelValue'])

  const videoUrl = ref('')
  const fileList = ref([])
  const dialogVisible = ref(false)
  // const isShowMask = ref(false)
  const fileType = ['mp4', 'avi', 'wmv', 'mov', 'flv', 'mkv']

  watch(
    () => props.modelValue,
    (val) => {
      if (val) {
        videoUrl.value = val
      } else {
        videoUrl.value = ''
      }
    },
    {
      immediate: true
    }
  )

  // 上传前的回调
  const handleBeforeUpload: UploadProps['beforeUpload'] = (file) => {
    if (fileType) {
      const suffix = file.name.split('.')[1].toLowerCase()
      const isVideo = fileType.indexOf(suffix) >= 0
      if (!isVideo) {
        ElMessage.error(`文件格式不正确, 请上传${fileType.join('/')}格式文件!`)
        return false
      }
    }
    try {
      uploadObject(file).then((res: any) => {
        videoUrl.value = res.url
        emit('update:modelValue', videoUrl.value)
      })
    } catch (error) {
      console.log('catch', error)
      ElMessage.error(error)
    }
    return false
  }
  const handleView = () => {
    dialogVisible.value = true
  }
  const removeVideo = () => {
    videoUrl.value = ''
    emit('update:modelValue', videoUrl.value)
  }
</script>

<style lang="scss" scoped>
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<style lang="scss">
  // .el-upload--picture-card 控制加号部分
  :deep(.hide .el-upload--picture-card) {
    display: none;
  }
  // 去掉动画效果
  :deep(.el-list-enter-active),
  :deep(.el-list-leave-active) {
    transition: all 0s;
  }

  :deep(.el-list-enter),
  .el-list-leave-active {
    opacity: 0;
    transform: translateY(0);
  }
  .video {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 6px;
  }
  .video-box {
    width: 148px;
    height: 148px;
    position: relative;
  }
  .video-box:hover .mask {
    display: flex;
  }
  .view {
    margin-right: 10px;
  }
  .icon {
    font-size: 20px;
    cursor: pointer;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    color: #fff;
    display: none;
    justify-content: center;
    align-items: center;
  }
</style>
